@import "../../common/styles/globalStyle.scss";


.my {
  .my-bg {
    height: vw(420);
    background: #ff2714;
    padding: vw(85) $globalPadding 0;
    text-align: left;
    color: #fff;
    position: relative;
    box-sizing: border-box;

    .user-data {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .user-logo {
        height: vw(120);
        width: vw(120);
        border: 2px solid #fff;
        border-radius: 50%;
        overflow: hidden;
        margin-right: vw(24);
      }

      .user-text {
        text-align: center;

        .user-name {
          font-size: vw(32);
          color: #fff;
          margin-bottom: vw(20);
          letter-spacing: 0.1em;
        }

        .user-id {
          font-size: vw(24);
          background: #ff7f33;
          padding: vw(12) vw(22);
          color: #fff;
          border-radius: vw(100);
          font-weight: bold;
        }
      }
    }

    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      bottom: vw(88);
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      padding: 0 $globalPadding;
      box-sizing: border-box;

      li {
        text-align: center;

        p {
          font-size: vw(25);

          &:first-child {
            margin-bottom: vw(20);
          }
        }
      }
    }
  }

  .my-content {
    padding: 0 $globalPadding;

    .my-money {
      height: vw(116);

      ul {
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: vw(8);
        height: vw(170);
        transform: translateY(vw(-54));

        li {
          flex: 1;

          &:first-child {
            border-right: 1px solid #d0d0d0;
          }

          p {
            font-size: vw(30);
            font-weight: bold;

            &:first-child {
              color: #cf5525;
              margin-bottom: vw(20);
            }
          }
        }
      }
    }

    .shopping-order {
      background: #fff;
      margin-top: vw(20);
      border-radius: vw(8);
      height: vw(260);
      padding: 0 vw(24);
      .shopping-order-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: vw(90);
        border-bottom: 1px solid #f3f3f3;
        h3{
          font-size: vw(30);
        }
        span{
          font-size: vw(20);
          color: #959595;
        }
      }

      .shopping-order-content{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: vw(50);
        li{
          flex: 1;
          text-align: center;
          .icon-test{
            width: vw(50);
            height: vw(50);
            background: red;
            margin: 0 auto;
          }
          span{
            margin: vw(10) 0;
            display: inline-block;
            font-size: vw(24);
          }
        }
      }
    }
  }
}
